<template>
  <view class="info-container">
    <!-- 头像 -->
    <view class="avatar">
      <text class="des">头像</text>
      <!-- <uni-file-picker v-model="file" fileMediatype="image" :del-icon="false" limit="1" @success="upload" /> -->
      <view class="upload-avatar" @click="upload">
        <image :src="user.avatar" mode="widthFix"></image>
      </view>
    </view>
    <!-- 姓名和学号(不可修改) -->
    <view class="name-stuId">
      <view class="name frist-v">
        <text class="des">姓名</text>
        <input type="text" v-model="user.name" disabled />
      </view>
      <view class="stuId frist-v">
        <text class="des">学号</text>
        <input type="text" v-model="user.stuId" disabled />
      </view>
    </view>
    <!-- 邮箱 手机号码 -->
    <view class="contact-way">
      <view class="email frist-v">
        <text class="des">邮箱</text>
        <input type="text" v-model="user.email" />
      </view>
      <view class="phone frist-v">
        <text class="des">手机号码</text>
        <input type="text" v-model="user.phone" />
      </view>
    </view>
    <!-- 保存按钮 -->
    <view class="btn">
      <button class="save" @click="save">保存</button>
    </view>

    <!-- 错误提示框 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message type="error" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  data () {
    return {
      // 提示框内容
      tips: '',
      // 头像文件
      user: {}
    }
  },
  onShow () {
    this.user = this.userInfo
  },
  methods: {
    ...mapMutations('user', ['updateUserInfo']),
    save () {
      // 判断是否位邮箱地址
      const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!emailReg.test(this.userInfo?.email))
        return this.messageToggle('请输入正确的邮箱地址!')
      // 判断手机号码长度是否为11位
      if (!/^[1][0-9]{10}$/.test(this.userInfo?.phone))
        return this.messageToggle('手机号码长度需为11位!')

      // 提交数据到接口    提交成功则跳转
      uni.uploadFile({
        url: 'http://localhost:8888/update', // 替换为你的后端接口地址
        filePath: this.user.avatar,
        name: 'file',
        formData: {
          userId: this.token,
          email: this.user.email,
          phone: this.user.phone,
        },
        success: (uploadRes) => {
          // 上传成功后的处理，可以根据后端返回的数据进行逻辑处理
          this.updateUserInfo({
            'avatar': this.user.avatar,
            'email': this.user.email,
            'phone': this.user.phone
          })
          console.log('%c [  ]-106', 'font-size:13px; background:pink; color:#bf2c9f;', uploadRes.data)
        },
        fail: (error) => {
          console.error('Error:', error);
        }
      });
      this.user = this.userInfo

      uni.navigateBack({
        success () {
          uni.$emit('param', { data: 1 })
        },
      })
    },
    upload () {
      uni.chooseImage({
        success: (chooseImageRes) => {
          // 获取出路径（数组）
          const tempFilePaths = chooseImageRes.tempFilePaths
          this.user.avatar = tempFilePaths[0]
        },
      })

    },
    // 封装提示框
    messageToggle (tips) {
      this.tips = tips
      this.$refs.message.open()
    },
  },
  computed: {
    ...mapState('user', ['userInfo', 'token']),
    avatar () {
      return this.userInfo.avatar ? this.userInfo.avatar : ''
    }
  },
}
</script>

<style lang="scss">
.info-container {
  font-size: 32rpx;

  view {
    .des {
      font-weight: 700;
    }
  }

  .avatar {
    background-color: #fff;
    margin-top: 20rpx;
    $size: 120rpx;
    height: $size + 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;

    .des {
      flex: 1;
    }

    .upload-avatar {
      overflow: hidden;
      width: 120rpx;
      height: 120rpx;
      border-radius: 100%;
      border: 2rpx darkgray solid;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .frist-v {
    background-color: #fff;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;

    input {
      flex: 1;
      text-align: right;
      color: darkgray;
    }
  }

  .name-stuId {
    margin-top: 20rpx;

    .frist-v:not(:last-of-type) {
      border-bottom: 1rpx solid #e5e5e5;
    }
  }

  .contact-way {
    margin-top: 20rpx;

    .frist-v:not(:last-of-type) {
      border-bottom: 1rpx solid #e5e5e5;
    }
  }

  //保存按钮
  .btn {
    margin-top: 40rpx;

    .save {
      align-items: center;
      background-color: skyblue;
      color: #fff;
      font-size: 32rpx;
    }
  }
}
</style>
